<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账户管理帮助 - UserHub</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="settings-security.css">
 
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <!-- 左侧Logo和导航 -->
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <i class="fa fa-connectdevelop text-primary text-2xl mr-2"></i>
                        <span class="font-bold text-xl text-primary">UserHub</span>
                    </div>
                    <nav class="hidden md:ml-10 md:flex md:space-x-8">
                        <a href="dashboard.html" class="text-gray-500 hover:text-primary hover:border-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
                            首页
                        </a>
                        <a href="messages.html" class="text-gray-500 hover:text-primary hover:border-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
                            消息
                        </a>
                        <a href="tasks.html" class="text-gray-500 hover:text-primary hover:border-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
                            任务
                        </a>
                        <a href="settings-profile.html" class="text-primary border-primary inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                            设置
                        </a>
                    </nav>
                </div>
                
                <!-- 右侧用户区域 -->
                <div class="flex items-center">
                    <!-- 搜索按钮 -->
                    <button class="p-2 rounded-full text-gray-500 hover:text-primary hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary mr-2 transition-colors duration-200">
                        <i class="fa fa-search"></i>
                    </button>
                    
                    <!-- 通知按钮 -->
                    <button class="p-2 rounded-full text-gray-500 hover:text-primary hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary relative mr-2 transition-colors duration-200">
                        <i class="fa fa-bell"></i>
                        <span class="absolute top-1 right-1 block h-2 w-2 rounded-full bg-red-500 ring-2 ring-white"></span>
                    </button>
                    
                    <!-- 用户菜单 -->
                    <div class="ml-3 relative">
                        <div>
                            <button type="button" class="flex items-center max-w-xs rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" id="user-menu-button">
                                <img class="h-8 w-8 rounded-full object-cover" src="https://picsum.photos/id/64/200/200" alt="用户头像" id="header-avatar">
                                <span class="ml-2 hidden md:block text-sm font-medium text-gray-700" id="user-display-name">张三</span>
                                <i class="fa fa-chevron-down ml-1 text-xs text-gray-500"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 移动端菜单按钮 -->
                    <button type="button" class="ml-4 md:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-500 hover:text-primary hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" id="mobile-menu-button">
                        <i class="fa fa-bars"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div class="md:hidden hidden" id="mobile-menu">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="dashboard.html" class="text-gray-500 hover:bg-gray-50 hover:text-primary hover:border-primary block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">
                    首页
                </a>
                <a href="messages.html" class="text-gray-500 hover:bg-gray-50 hover:text-primary hover:border-primary block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">
                    消息
                </a>
                <a href="tasks.html" class="text-gray-500 hover:bg-gray-50 hover:text-primary hover:border-primary block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">
                    任务
                </a>
                <a href="settings-profile.html" class="bg-primary/10 text-primary block pl-3 pr-4 py-2 border-l-4 border-primary text-base font-medium">
                    设置
                </a>
            </div>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 页面标题 -->
        <div class="mb-8">
            <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold">设置</h1>
            <p class="text-gray-500 mt-1">管理您的账户设置和偏好</p>
        </div>
        
        <div class="flex flex-col lg:flex-row gap-8">
            <!-- 左侧设置导航 -->
            <div class="lg:w-1/4">
                <div class="bg-white rounded-xl shadow-sm overflow-hidden sticky top-24">
                    <div class="p-4 border-b border-gray-100">
                        <h3 class="font-medium">设置选项</h3>
                    </div>
                    <nav class="p-2">
                        <a href="settings-profile.html" class="setting-nav-item flex items-center px-4 py-3 text-sm font-medium text-gray-700 rounded-lg mb-1 hover:bg-gray-50 transition-colors">
                            <i class="fa fa-user-circle w-5 text-center mr-3"></i>
                            <span>个人资料</span>
                        </a>
                        <a href="settings-security.html" class="setting-nav-item nav-item-active flex items-center px-4 py-3 text-sm font-medium rounded-lg mb-1 transition-colors">
                            <i class="fa fa-lock w-5 text-center mr-3"></i>
                            <span>账户安全</span>
                        </a>
                        <a href="settings-notifications.html" class="setting-nav-item flex items-center px-4 py-3 text-sm font-medium text-gray-700 rounded-lg mb-1 hover:bg-gray-50 transition-colors">
                            <i class="fa fa-bell w-5 text-center mr-3"></i>
                            <span>通知设置</span>
                        </a>
                        <a href="settings-privacy.html" class="setting-nav-item flex items-center px-4 py-3 text-sm font-medium text-gray-700 rounded-lg mb-1 hover:bg-gray-50 transition-colors">
                            <i class="fa fa-shield w-5 text-center mr-3"></i>
                            <span>隐私设置</span>
                        </a>
                        <a href="settings-integrations.html" class="setting-nav-item flex items-center px-4 py-3 text-sm font-medium text-gray-700 rounded-lg mb-1 hover:bg-gray-50 transition-colors">
                            <i class="fa fa-plug w-5 text-center mr-3"></i>
                            <span>集成服务</span>
                        </a>
                        <a href="settings-about.html" class="setting-nav-item flex items-center px-4 py-3 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
                            <i class="fa fa-info-circle w-5 text-center mr-3"></i>
                            <span>关于我们</span>
                        </a>
                    </nav>
                    
                    <div class="p-4 border-t border-gray-100 mt-2">
                        <button id="logout-btn" class="w-full flex items-center justify-center px-4 py-2 border border-danger text-danger rounded-lg hover:bg-danger hover:text-white transition-colors">
                            <i class="fa fa-sign-out mr-2"></i>
                            <span>退出登录</span>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 右侧设置内容 -->
            <div class="lg:w-3/4">
                <!-- 账户安全设置 -->
                <section id="security" class="bg-white rounded-xl shadow-sm overflow-hidden">
                    <div class="p-6 border-b border-gray-100">
                        <h2 class="text-xl font-bold">账户安全</h2>
                        <p class="text-gray-500 mt-1">管理您的登录密码和安全设置</p>
                    </div>
                    
                    <div class="divide-y divide-gray-100">
                        <!-- 密码设置 -->
                        <div class="p-6 setting-card-hover">
                            <div class="flex flex-col md:flex-row md:items-center justify-between">
                                <div>
                                    <h3 class="font-medium">登录密码</h3>
                                    <p class="text-sm text-gray-500 mt-1">上次更新于 3 个月前</p>
                                </div>
                                <button id="change-password-btn" class="mt-3 md:mt-0 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                                    更改密码
                                </button>
                            </div>
                        </div>
                        
                        <!-- 邮箱验证 -->
                        <div class="p-6 setting-card-hover">
                            <div class="flex flex-col md:flex-row md:items-center justify-between">
                                <div>
                                    <h3 class="font-medium">邮箱验证</h3>
                                    <p class="text-sm text-gray-500 mt-1">验证您的邮箱以提高账户安全性</p>
                                    <p class="text-sm text-success mt-1 flex items-center">
                                        <i class="fa fa-check-circle mr-1"></i>
                                        <span id="verified-email">user@example.com 已验证</span>
                                    </p>
                                </div>
                                <button id="change-email-btn" class="mt-3 md:mt-0 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                                    更换邮箱
                                </button>
                            </div>
                        </div>
                        
                        <!-- 两步验证 -->
                        <div class="p-6 setting-card-hover">
                            <div class="flex flex-col md:flex-row md:items-center justify-between">
                                <div>
                                    <h3 class="font-medium">两步验证</h3>
                                    <p class="text-sm text-gray-500 mt-1">开启后，登录时需要额外的验证码确认</p>
                                </div>
                                <label class="relative inline-flex items-center cursor-pointer mt-3 md:mt-0">
                                    <input type="checkbox" id="two-factor-auth" class="sr-only peer">
                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                                </label>
                            </div>
                        </div>
                        
                        <!-- 登录历史 -->
                        <div class="p-6 setting-card-hover">
                            <div class="flex flex-col md:flex-row md:items-center justify-between">
                                <div>
                                    <h3 class="font-medium">登录历史</h3>
                                    <p class="text-sm text-gray-500 mt-1">查看最近的登录记录和设备信息</p>
                                </div>
                                <button id="view-login-history" class="mt-3 md:mt-0 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                                    查看详情
                                </button>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </main>

    <!-- 更改密码模态框 -->
    <div id="change-password-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4 transform transition-all">
            <div class="p-6 border-b border-gray-100 flex justify-between items-center">
                <h3 class="text-lg font-bold">更改密码</h3>
                <button class="close-modal text-gray-400 hover:text-gray-500">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="p-6">
                <form id="change-password-form" class="space-y-4">
                    <div>
                        <label for="current-password" class="block text-sm font-medium text-gray-700 mb-1">当前密码</label>
                        <input type="password" id="current-password" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" placeholder="请输入当前密码" required>
                    </div>
                    
                    <div>
                        <label for="new-password" class="block text-sm font-medium text-gray-700 mb-1">新密码</label>
                        <input type="password" id="new-password" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" placeholder="请输入新密码" required>
                        <p class="text-xs text-gray-500 mt-1">密码长度至少8位，包含字母和数字</p>
                    </div>
                    
                    <div>
                        <label for="confirm-password" class="block text-sm font-medium text-gray-700 mb-1">确认新密码</label>
                        <input type="password" id="confirm-password" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" placeholder="请再次输入新密码" required>
                    </div>
                </form>
            </div>
            <div class="p-6 border-t border-gray-100 flex justify-end space-x-3">
                <button class="cancel-modal px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                    取消
                </button>
                <button id="submit-password-change" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                    确认更改
                </button>
            </div>
        </div>
    </div>

    <!-- 更改邮箱模态框 -->
    <div id="change-email-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4 transform transition-all">
            <div class="p-6 border-b border-gray-100 flex justify-between items-center">
                <h3 class="text-lg font-bold">更换邮箱</h3>
                <button class="close-modal text-gray-400 hover:text-gray-500">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="p-6">
                <form id="change-email-form" class="space-y-4">
                    <div>
                        <label for="new-email" class="block text-sm font-medium text-gray-700 mb-1">新邮箱地址</label>
                        <input type="email" id="new-email" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" placeholder="请输入新的邮箱地址" required>
                    </div>
                    
                    <div>
                        <label for="email-verification-code" class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
                        <div class="flex space-x-2">
                            <input type="text" id="email-verification-code" class="flex-grow px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" placeholder="请输入验证码" required>
                            <button type="button" id="send-verification-code" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors whitespace-nowrap">
                                获取验证码
                            </button>
                        </div>
                    </div>
                    
                    <div>
                        <label for="password-for-email" class="block text-sm font-medium text-gray-700 mb-1">密码确认</label>
                        <input type="password" id="password-for-email" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" placeholder="请输入当前密码确认" required>
                    </div>
                </form>
            </div>
            <div class="p-6 border-t border-gray-100 flex justify-end space-x-3">
                <button class="cancel-modal px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                    取消
                </button>
                <button id="submit-email-change" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                    确认更换
                </button>
            </div>
        </div>
    </div>

    <!-- 登录历史模态框 -->
    <div id="login-history-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl mx-4 max-h-[80vh] flex flex-col">
            <div class="p-6 border-b border-gray-100 flex justify-between items-center">
                <h3 class="text-lg font-bold">登录历史</h3>
                <button class="close-modal text-gray-400 hover:text-gray-500">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="p-6 overflow-y-auto flex-grow">
                <div class="space-y-4">
                    <!-- 最近登录记录 -->
                    <div class="p-4 border border-gray-100 rounded-lg bg-primary/5">
                        <div class="flex justify-between items-start">
                            <div>
                                <h4 class="font-medium">当前登录</h4>
                                <p class="text-sm text-gray-500 mt-1">今天 14:35</p>
                            </div>
                            <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded-full">当前会话</span>
                        </div>
                        <div class="mt-3 space-y-2">
                            <p class="text-sm flex items-center">
                                <i class="fa fa-globe text-gray-400 w-5"></i>
                                <span>IP地址: 192.168.1.1</span>
                            </p>
                            <p class="text-sm flex items-center">
                                <i class="fa fa-desktop text-gray-400 w-5"></i>
                                <span>设备: Windows 10 - Chrome 96.0.4664.110</span>
                            </p>
                            <p class="text-sm flex items-center">
                                <i class="fa fa-map-marker text-gray-400 w-5"></i>
                                <span>位置: 北京市</span>
                            </p>
                        </div>
                    </div>
                    
                    <!-- 其他登录记录 -->
                    <div class="p-4 border border-gray-100 rounded-lg">
                        <div class="flex justify-between items-start">
                            <div>
                                <h4 class="font-medium">上次登录</h4>
                                <p class="text-sm text-gray-500 mt-1">昨天 09:12</p>
                            </div>
                        </div>
                        <div class="mt-3 space-y-2">
                            <p class="text-sm flex items-center">
                                <i class="fa fa-globe text-gray-400 w-5"></i>
                                <span>IP地址: 192.168.1.1</span>
                            </p>
                            <p class="text-sm flex items-center">
                                <i class="fa fa-laptop text-gray-400 w-5"></i>
                                <span>设备: macOS Monterey - Safari 15.2</span>
                            </p>
                            <p class="text-sm flex items-center">
                                <i class="fa fa-map-marker text-gray-400 w-5"></i>
                                <span>位置: 北京市</span>
                            </p>
                        </div>
                    </div>
                    
                    <div class="p-4 border border-gray-100 rounded-lg">
                        <div class="flex justify-between items-start">
                            <div>
                                <h4 class="font-medium">登录记录</h4>
                                <p class="text-sm text-gray-500 mt-1">2023-11-15 20:45</p>
                            </div>
                        </div>
                        <div class="mt-3 space-y-2">
                            <p class="text-sm flex items-center">
                                <i class="fa fa-globe text-gray-400 w-5"></i>
                                <span>IP地址: 103.24.xx.xx</span>
                            </p>
                            <p class="text-sm flex items-center">
                                <i class="fa fa-mobile text-gray-400 w-5 text-lg"></i>
                                <span>设备: iOS 15.1 - Safari</span>
                            </p>
                            <p class="text-sm flex items-center">
                                <i class="fa fa-map-marker text-gray-400 w-5"></i>
                                <span>位置: 上海市</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="p-6 border-t border-gray-100 flex justify-end">
                <button class="cancel-modal px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                    关闭
                </button>
            </div>
        </div>
    </div>

    <!-- 成功提示 Toast -->
    <div id="success-toast" class="fixed bottom-6 right-6 bg-success text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 flex items-center">
        <i class="fa fa-check-circle mr-2"></i>
        <span id="toast-message">操作成功</span>
    </div>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-8 mt-auto">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center mb-4 md:mb-0">
                    <i class="fa fa-connectdevelop text-primary text-xl mr-2"></i>
                    <span class="font-bold text-lg text-primary">UserHub</span>
                </div>
                <div class="flex space-x-6">
                  <a href="https://weixin.qq.com" class="text-gray-400 hover:text-primary transition-colors duration-200" title="微信">
                    <i class="fa fa-weixin text-xl"></i>
                </a>
                <a href="https://im.qq.com/index" class="text-gray-400 hover:text-primary transition-colors duration-200" title="QQ">
                    <i class="fa fa-qq text-xl"></i>
                </a>
                <a href="https://weibo.com/newlogin?tabtype=weibo&gid=102803&openLoginLayer=0&url=https%3A%2F%2Fweibo.com%2F" class="text-gray-400 hover:text-primary transition-colors duration-200" title="微博">
                    <i class="fa fa-weibo text-xl"></i>
                </a>
                </div>
            </div>
            <div class="mt-6 border-t border-gray-200 pt-6 flex flex-col md:flex-row justify-between items-center">
                <p class="text-sm text-gray-500">
                    &copy; 2025 UserHub. 保留所有权利.
                </p>
                <div class="mt-4 md:mt-0 flex space-x-6">
                    <a href="privacy-policy.html" class="text-sm text-gray-500 hover:text-primary transition-colors duration-200">隐私政策</a>
                    <a href="terms-of-service.html" class="text-sm text-gray-500 hover:text-primary transition-colors duration-200">使用条款</a>
                    <a href="help-center.html" class="text-sm text-gray-500 hover:text-primary transition-colors duration-200">帮助中心</a>
                </div>
            </div>
        </div>
    </footer>
    <script src="settings-security.js"></script>
    </body>
</html>
    